import React, { Component, useState, useEffect } from "react";
import { Form, Input, Button, Checkbox, Select, Radio } from "antd";
import { http } from "../../../api";
const { Option } = Select;
export default function Paper() {
  const [majorlist, setMajorlist] = useState([]);
  const layout = {
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      span: 16,
    },
  };

  const onFinish = (values) => {
    http.addpaper(values).then((res) => {
      // console.log(res);
    });
  };

  const onFinishFailed = (errorInfo) => {
    // console.log('Failed:', errorInfo);
  };
  useEffect(() => {
    var list = [];
    http.categorylist().then((res) => {
      if (res.data.code == 200) {
        res.data.val.map((item) => {
          list.push(item.code);
        });
      }
      setMajorlist(list);
    });
  }, []);
  return (
    <div>
      <Form
        {...layout}
        name="basic"
        initialValues={{
          many: "false",
          amount: 10,
          code: "请选择",
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        layout="vertical"
      >
        <Form.Item
          label="套题名字"
          name="title"
          rules={[
            {
              required: true,
              message: "请输入套题名字",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="专业类型"
          name="code"
          rules={[
            {
              required: true,
              message: "请选择专业类型",
            },
          ]}
        >
          <Select style={{ width: 120 }}>
            {majorlist &&
              majorlist.map((item, i) => (
                <Option value={item} key={i}>
                  {" "}
                  {item}
                </Option>
              ))}
          </Select>
        </Form.Item>

        <Form.Item label="题目种类" name="many">
          <Radio.Group size="large">
            <Radio.Button value="false" style={{ marginRight: 10 }}>
              单选
            </Radio.Button>
            <Radio.Button value="true">多选</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="相关技术" name="technology">
          <Input />
        </Form.Item>
        <Form.Item label="题目总数" name="amount">
          <Radio.Group size="large">
            <Radio.Button value={10} style={{ marginRight: 10 }}>
              10道
            </Radio.Button>
            <Radio.Button value={20}>20道</Radio.Button>
            <Radio.Button value={30}>30道</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
